<template>
  <view class="container">
    <nut-datepicker @onChange="onChange" class="submit_button">
      <nut-cell title="请选择日期" :desc="desc"></nut-cell>
    </nut-datepicker>
    <yh_input
      label="土建开工时间"
      placeholder="请选择"
      :disabled="true"
      :required="true"
      :image="true"
      v-model="startingTime"
      @click="handleDataClick('startingTime', true)"
    />
    <yh_input
      label="雨虹承接项目开工时间"
      placeholder="请选择"
      :disabled="true"
      :required="true"
      :image="true"
      v-model="completionTime"
      @click="handleDataClick('completionTime', true)"
    />
    <view class="reason">
      <view class="reason-label">未进入开工阶段原因</view>
      <textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="无"></textarea>
    </view>
    <view class="unit-title">
      <view class="unit-title-left">开工方</view>
      <view class="unit-title-right" @click="handleAddCompany">
        <nut-icon
          font-class-name="iconfont"
          class-prefix="iconfont"
          name=".icon-tianjia_hongdi"
          size="18"
          color="#155BD4"
        />
        <text>添加</text>
      </view>
    </view>
    <view class="unit-list">
      <view class="unit-list-item">
        <view class="company-name">
          <view class="company-name-content">
            <view class="content">北京市民望房地产开发有限责任公司</view>
            <nut-icon
              font-class-name="iconfont"
              class-prefix="iconfont"
              name=".icon-gengduo"
              size="20"
            />
          </view>
          <view class="company-name-tag">
            <view class="tag">审核通过</view>
          </view>
        </view>
        <view class="company-type border-top-one">
          <yh_input
            label="甲方职能分类"
            placeholder="请选择"
            v-model="partyFunctionClass"
            :disabled="true"
            :required="true"
            :image="true"
          />
        </view>
        <view class="company-contact">
          <view class="contact-item">
            <view class="item-name"> 某某某（男） 18888888888</view>
            <view class="item-delete">
              <nut-icon
                font-class-name="iconfont"
                class-prefix="iconfont"
                name=".icon-shanchuhang_zhihui"
                size="16"
                color="#cccccc"
              />
            </view>
          </view>
          <view class="contact-item">
            <view class="item-name"> 某某某（男） 18888888888</view>
            <view class="item-delete">
              <nut-icon
                font-class-name="iconfont"
                class-prefix="iconfont"
                name=".icon-shanchuhang_zhihui"
                size="16"
                color="#cccccc"
              />
            </view>
          </view>
          <view
            class="contact-add"
            @click="handleGo('/pages/project/approval/add-contact/index')"
          >
            <nut-icon
              font-class-name="iconfont"
              class-prefix="iconfont"
              name=".icon-tianjia"
              size="20"
            />
            <text>添加联系人</text>
          </view>
        </view>
      </view>
    </view>
    <view class="submit_button">
      <nut-button
        class=""
        size="large"
        type="primary"
        shape="square"
        color="#DC2734"
        @click="handleGo('/pages/project/approval/index')"
        >保存
      </nut-button>
    </view>
    <yh_add_company v-model="selectShow" />
    <yh_bottom_select_sure v-model="addStartShow"/>
  </view>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import Taro from "@tarojs/taro";
import yh_input from "@/components/yh-input.vue";
import yh_add_company from "@/components/yh-add-company.vue";
import yh_bottom_select_sure from "@/components/yh-bottom-select-sure.vue";

export default {
  name: "add-starts",
  components: { yh_input, yh_add_company,yh_bottom_select_sure },
  setup() {
    const state = reactive({
      projectTime: "", //立项时间
      startingTime: "", //开工时间
      completionTime: "", //竣工时间
      totalSalesAmount: "", //销售总金额
      buildingMaterialArea: "", //建筑材料面积
      partyFunctionClass: "", //甲方职能分类
      currentDate: "",
      currentDataPick: "",
      datePickShow: true,
      name: "",
      projectType: "",
      businessType: "",
      saleType: "",
      projectCooperationType: "",
      selectShow: false,
      selectOptions: {
        projectType: {
          type: "projectType",
          name: "项目类型",
          list: ["新建", "改建", "扩建"],
        },
      },
      selectedOptions: {},
      addStartShow:true,
    });

    const handleSelectClick = (
      options: string,
      selectShow: boolean = false
    ) => {
      state.selectedOptions = state.selectOptions[options];
      state.selectShow = selectShow;
    };

    //handleDataClick
    const handleDataClick = (options: string, selectShow: boolean = false) => {
      console.log(options);
      console.log(selectShow);
      state.currentDataPick = options;
      state.datePickShow = selectShow;
    };

    //handOptionsSelected
    const handOptionsSelected = (
      selectedValue: string,
      selectedOptionName: string
    ) => {
      state.selectShow = false;
      state[selectedOptionName] = selectedValue;
      console.log("selectedValue is :" + selectedValue);
    };
    const handleGo = (url: string) => {
      Taro.navigateTo({
        url: url,
      });
    };
    const desc = ref();

    const onChange = (value: any) => {
      desc.value = value;
    };
    //添加甲方公司
    const handleAddCompany = () => {
      state.selectShow = true;
    };
    return {
      ...toRefs(state),
      handleSelectClick,
      handOptionsSelected,
      handleGo,
      handleDataClick,
      desc,
      onChange,
      handleAddCompany,
    };
  },
};
</script>

<style lang="scss" >
.reason{
  padding: 0 16px 16px 16px;
  background: #ffffff;
  &-label{
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
    padding: 12px 0;
  }
  .textarea{
    width: calc(100% - 16px);
    height: 76px;
    padding: 8px;
    background: #f7f7f7;
    border-radius: 4px;
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #cccccc;
    line-height: 20px;
  }
}
.unit-title {
  padding-top: 20px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  &-left {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }
  &-right {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 14px;
    font-weight: 400;
    color: #155bd4;
    align-items: center;
  }
}

.unit-list {
  padding: 12px 8px;
  background: #f5f5f5;
  &-item {
    background: #fff;
    .company-name {
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      &-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .content {
          font-size: 13px;
          font-weight: 500;
          color: #333333;
          line-height: 18px;
          flex: 1;
        }
        .moreIcon {
          width: 20px;
          height: 20px;
        }
      }
      &-tag {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .tag {
          width: 48px;
          height: 16px;
          background: rgba(41, 170, 145, 0.07);
          border-radius: 1px;
          line-height: 14px;
          font-size: 10px;
          font-weight: 400;
          color: #29aa91;
        }
      }
    }
    .company-type {
      .nut-input-label {
        color: #666666;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
      }
    }
    .company-contact {
      padding: 12px 16px;
      .contact-item {
        padding-bottom: 6px;
        padding-top: 6px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .item-name {
          width: 144px;
          height: 16px;
          font-size: 11px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 16px;
        }
      }
      .contact-add {
        padding-bottom: 6px;
        padding-top: 6px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 800;
        color: #155bd4;
        line-height: 18px;
        align-items: center;
      }
    }
  }
}
</style>
